<template>
	<view class="tabs">
		<view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: currentTab === index }"
			@click="selectTab(index)">
			{{ tab.name }}
			<!-- 显示消息提示 -->
			<view v-if="tabMessages && tabMessages.length > 0" class="xiaoxi">
				{{ tabMessages[index] }}
			</view>
			<!-- 选中状态的下划线 -->
			<view class="underline" v-if="currentTab === index"></view>
			<!-- 通知红点 -->
			<view class="notification-dot" v-if="notifications[index] > 0">
				{{ notifications[index] }}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		tabs: {
			type: Array,
			required: true
		},
		currentTab: {
			type: Number,
			default: 0
		},
		tabMessages: {
			type: Array,
			default: () => []
		},
		notifications: {
			type: Array,
			default: () => []
		}
	});

	const emit = defineEmits(['update:currentTab', 'tab-change']);

	const selectTab = (index) => {
		emit('update:currentTab', index); // 双向绑定
		emit('tab-change', index); // 触发 tab-change 事件
	};
</script>

<style scoped lang="scss">
	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		position: relative;
	}

	.tab {
		padding: 10rpx 20rpx;
		cursor: pointer;
		position: relative;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaoxi {
		margin-left: 10rpx;
		width: 40rpx;
		height: 28rpx;
		background: #D31A1A;
		border-radius: 16rpx;
		font-weight: bold;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		position: absolute;
		right: -12rpx;
		top: 2rpx;
	}

	.tab.active {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 4rpx;
		background-color: #007AFF;
	}

	.notification-dot {
		position: absolute;
		top: 0;
		right: 0;
		background-color: red;
		color: white;
		border-radius: 10rpx;
		padding: 2rpx 5rpx;
		font-size: 14rpx;
		white-space: nowrap;
		transform: translate(50%, -50%);
	}
</style>